<template>
	<view class="zy_cell_container">
		<view :class="title?'zy_cell_title':''">
			<text>{{title}}</text>
		</view>
		<view :class="type==='list'?'zy_cell_list':'zy_cell_group'"
			:style="[{backgroundColor:`${type==='list'?backgroundColor:''}`,color:`${type==='list'?color:''}`}]">
			<view v-for="(item,index) in cellList">
				<view :class="type==='list'?'zy_cell_itemList':'zy_cell_itemGroup'"
					:style="[{backgroundColor:`${type==='list'?'':backgroundColor}`,color:`${type==='list'?'':color}`}]"
					@tap="clickHandler(item,index)">
					<!-- 左侧图片：自定义图片；默认宽高55rpx -->
					<image v-if="item.img" :src="item.img"
						:style="[{width:`${item.imgWidth?item.imgWidth:'55rpx'}`,height:`${item.imgHeight?item.imgHeight:'55rpx'}`}]"
						class="zy_cell_img" mode="aspectFit"></image>
					<!-- 右侧iconfont图标自定义 -->
					<i class="zy_cell_icon" v-if="item.iconfont" :class="item.iconfont"
						:style="[{fontSize:`${item.iconfontSize?item.iconfontSize:'42'}rpx`,color:`${item.iconfontColor}`,fontWeight:`${item.iconfontBold?'bolder':''}`}]"></i>
					<!-- 左侧图标自定义 -->
					<zy-icon v-if="item.icon" :name="'zy-icon-'+item.icon" :color="item.iconColor||color"
						:bold="item.iconBold" :size="item.iconSize ||'42'" class="zy_cell_icon">
					</zy-icon>
					<!-- 右侧内容：数组中最后一行没下划线 -->
					<view
						:class="index===cellList.length - 1?'zy_cell_noBorder':'zy_cell_border' &&type==='list'?'zy_cell_border':'zy_cell_noBorder'">
						<!-- 名称 -->
						<text class="zy_cell_text" :style="[{color:`${color}`}]">{{item.text}}</text>
						<!-- 右侧：默认显示图标是向右，也可以选择自定义文字或者图片 -->
						<zy-icon v-if="!item.sufText&&!item.sufImg" :name="'zy-icon-single-arrow-right'"
							:color="color||'#999999'" :size="item.rightIconSize ||'35'" :bold="item.sufIconBold"
							class="zy_cell_rightIcon">
						</zy-icon>
						<view v-if="item.sufImg" class="zy_cell_rightImg">
							<image :src="item.sufImg"
								:style="[{width:`${item.sufImgWidth?item.sufImgWidth:'35rpx'}`,height:`${item.sufImgHeight?item.sufImgHeight:'35rpx'}`}]"
								mode="aspectFit"></image>
						</view>
						<text v-if="item.sufText" class="zy_cell_rightIcon">{{item.sufText}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		emits: ['clickHandler'],
		props: {
			// 单元格标题
			title: {
				type: String,
			},
			// 单元格数据
			cellList: {
				type: Array,
			},
			// 单元格类型，list和group	
			type: {
				type: String,
				default: 'list'
			},
			//背景颜色
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},
			//字体颜色
			color: {
				type: String,
				default: ''
			},
		},
		data() {
			return {}
		},
		methods: {
			//单击事件
			clickHandler(item, index) {
				//存在url，跳转url页面
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
				this.$emit('clickHandler', {
					item: item,
					index: index
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>
